<template>
  <div class="tn-select-group">
    <el-option-group
      v-for="(group_item, index) in groupItem"
      :key="'tn_el_option_group' + group_item[labelKey] + index"
      :label="group_item[labelKey]"
    >
      <el-option
        v-if="parentClick"
        :value="group_item[valueKey]"
        :label="group_item[labelKey]"
      />
      <div
        v-if="group_item.children && group_item.children.length > 0"
      >
        <div
          v-for="(group_child_item, child_index) in group_item.children"
          :key="'tn_el_option_group_child' + group_child_item[labelKey] + child_index"
        >
          <tn-select-group
            v-if="group_child_item.children && group_child_item.children.length > 0"
            :item="group_child_item"
            :label-key="labelKey"
            :value-key="valueKey"
            :parent-click="parentClick"
          />
          <el-option
            v-else
            :value="group_child_item[valueKey]"
            :label="group_child_item[labelKey]"
          />
        </div>
      </div>
    </el-option-group>
  </div>
</template>

<script>
import { isObject } from '../../utils'
export default {
  name: 'TnSelectGroup',
  props: {
    item: {
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    valueKey: {
      type: String,
      default: 'id'
    },
    parentClick: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    groupItem: function() {
      let item = []
      if (isObject(this.item)) {
        item.push(this.item)
      } else {
        item = this.item
      }
      return item
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
